<template lang="pug">
h1 {{ $t('menu.bmap') }}
.container
  #map
  Corner(@speak="speak" @search="search" @location="locate")
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Corner from './car/Corner.vue'

const map = ref<BMapGL.Map>()
// const center = ref<BMapGL.Point>()
const location = ref<BMapGL.Geolocation>()
const local = ref<BMapGL.LocalSearch>()
const driving = ref<BMapGL.DrivingRoute>()
const centerMark = ref<BMapGL.Marker>()

onMounted(() => {
  map.value = new BMapGL.Map('map')
  map.value.enableScrollWheelZoom()
  location.value = new BMapGL.Geolocation()
  locate()
  local.value = new BMapGL.LocalSearch(map.value, { renderOptions: { map: map.value } })
  driving.value = new BMapGL.DrivingRoute(map.value)
})

const locate = () => {
  location.value?.getCurrentPosition(centerlize, { enableHighAccuracy: true, timeout: 1000 })
}

const speak = () => {
  console.log('speak de')
}

const search = () => {
  local.value?.search('充电站')
}


const centerlize = (res: BMapGL.GeolocationResult) => {
  let center = res.point
  map.value?.centerAndZoom(center, 15)
  let mark = centerMark.value || new BMapGL.Marker(center)
  map.value?.removeOverlay(mark)
  map.value?.addOverlay(mark)
  mark.setPosition(center)
  map.value?.panTo(center)
}

</script>

<script lang="ts">
export default {
  name: 'BMapGl'
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 400px;
}
.container {
  position: relative;
  padding: 0;
  height: 400px;
}
</style>
